<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body >
<div class="container-fluid">
	<h3>列的排版</h3>
    <div class="row padding8">
    	<div class="col-md-4 bg-blue">列1</div>
        <div class="col-md-8 bg-danger">列2</div>
        
    </div>
    <h3>Code</h3>
    <div>
        <pre>
            <code>
            	<span>&lt;div class="row"&gt;</span>
                  <span>&lt;div class="col-md-4"&gt;列1&lt;/div&gt;</span>
                  <span>&lt;div class="col-md-8"&gt;列2&lt;/div&gt;</span>
               	<span>&lt;/div&gt;</span>
            </code>
        </pre>
    </div>
    <h4>简要说明</h4>
    <p>&lt;div class="row"&gt; 表示创建行，且将这一行分为12等份, &lt;div class="col-md-4"&gt;列1&lt;/div&gt; 中的 class="col-md-4" 表示占12份中的4份，相应的 class="col-md-8" 就是占8份，如果有需要更改列的宽度，直接修改后面的数字即可。但是每行的数字之和为12如果大于12最后一列将会自动换行。</p>
    <hr />
	<h3>标题与文本框水平对齐排列</h3>
	<div class="row padding8">
    	<form class="form-horizontal"  role="form">
        	
            <div class="col-md-4 form-group">
                <label class="col-md-4 control-label">订单编号*</label>
                <div class="col-md-8">
                  <input type="text" class="form-control"  placeholder="手写（不制动生成）">
                </div>
            </div>
            <div class="col-md-4 form-group">
                <label class="col-md-4 control-label">订单编号*</label>
                <div class="col-md-8">
                  <input type="text" class="form-control"  placeholder="手写（不制动生成）">
                </div>
            </div>
            <div class="col-md-4 form-group">
                <label class="col-md-4 control-label">订单编号*</label>
                <div class="col-md-8">
                  <input type="text" class="form-control"  placeholder="手写（不制动生成）">
                </div>
            </div>
       	</form>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                <span>&lt;div class="row"&gt;</span>
                   <span>&lt;form class="form-horizontal"  role="form"&gt;</span>
                   	<span>&lt;div class="col-md-4 form-group"&gt;</span>
                        	<span>&lt;label class="col-md-4 control-label"&gt;订单编号*&lt;/label&gt;</span>
                            	<span>&lt;div class="col-md-8"&gt;</span>
                                   <span>&lt;input type="text" class="form-control"  placeholder="手写（不制动生成）"/&gt;</span>
                           	<span>&lt;/div&gt;</span>
                    	<span>&lt;/div&gt;</span>
                   	<span>&lt;div class="col-md-4 form-group"&gt;</span>
                        	<span>&lt;label class="col-md-4 control-label"&gt;订单编号*&lt;/label&gt;</span>
                            	<span>&lt;div class="col-md-8"&gt;</span>
                                   <span>&lt;input type="text" class="form-control"  placeholder="手写（不制动生成）"/&gt;</span>
                           	<span>&lt;/div&gt;</span>
                    	<span>&lt;/div&gt;</span>
                    	<span>&lt;div class="col-md-4 form-group"&gt;</span>
                        	<span>&lt;label class="col-md-4 control-label"&gt;订单编号*&lt;/label&gt;</span>
                            	<span>&lt;div class="col-md-8"&gt;</span>
                                   <span>&lt;input type="text" class="form-control"  placeholder="手写（不制动生成）"/&gt;</span>
                           	<span>&lt;/div&gt;</span>
                    	<span>&lt;/div&gt;</span>
                   <span>&lt;/form&gt;</span>
                <span>&lt;/div&gt;</span>
               
            </code>
        </pre>
    </div>
    <h4>简要说明</h4>
    <p><span>&lt;form class="form-horizontal"  role="form"&gt;</span> 表示创建一个表单，class="form-horizontal" 表示表单内的每个组的内容按水平排列，<span>&lt;div class="col-md-4 form-group"&gt;</span> 创建列， class="col-md-4 form-group" 中 form-group 表示分组，组中内容布局按列的布局方式排版。</p>
   	<hr />
   
    <h3>按钮水平排列对齐</h3>
    <div class="row  tool-bar">
    	<div class=" col-md-12">
        	<a href="#" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>保存并新增</a>
        	<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk "></span>保存</a>
            <a href="#" class="btn btn-primary"> <span class="glyphicon glyphicon-edity"> </span>审核</a>
            <a href="#" class="btn btn-primary"> <span class="glyphicon glyphicon-share"> </span>反审核</a>
            <a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"> </span>查看日志</a>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
            	&lt;!--创建按钮工具条--&gt;
            	<span>&lt;div class="row tool-bar"&gt;</span>
                    <span>&lt;div class="col-md-12"&gt;</span>
                    	&lt;!--根据实际情况创建相应按钮--&gt;
                        <span>&lt;a href="#" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;保存并新增</a></span>
                        <span>&lt;a href="#" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt;保存</a></span>
                        <span>&lt;a href="#" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-edity"&gt;&lt;/span&gt;审核</a></span>
                        <span>&lt;a href="#" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-share"&gt;&lt;/span&gt;反审核</a></span>
                        <span>&lt;a href="#" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;查看日志</a></span>
                    <span>&lt;/div&gt;</span>
                <span>&lt;/div&gt;</span>
            </code>
        </pre>
    </div>
    <hr />
    <h3>分页布局</h3>
    <div class="page-bar">
        <div class="col-md-3 list-nameber hidden-xs">总计23条记录，当前为1-20条</div>
        <div class="col-md-9 text-right form-inline">
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li  class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
            
            <div class="input-group hidden-xs">
                <input type="text" class="form-control" placeholder="转到第几页？" >
                <span class="input-group-btn">
                <button class="btn btn-success" type="button">转到</button>
                </span>
                
            </div>
            <div class="input-group hidden-xs">
                <select class="form-control" style="display:table-cell">
                    <option>10</option>
                    <option>20</option>
                    <option>30</option>
                </select>
            </div>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;!--创建分页栏--&gt;
                <span>&lt;div class="page-bar"&gt;</span>
                    &lt;!--页数统计--&gt;
                    <span>&lt;div class="col-md-3 list-nameber hidden-xs"&gt;总计23条记录，当前为1-20条&lt;/div&gt;</span>
                    <span>&lt;div class="col-md-9 text-right form-inline"&gt;</span>
                        &lt;!--页码--&gt;
                        <span>&lt;ul class="pagination"&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;</li&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;</span>
                        <span>&lt;/ul&gt;</span>
                        &lt;!--快速跳转--&gt;
                        <span>&lt;div class="input-group hidden-xs"&gt;</span>
                            <span>&lt;input type="text" class="form-control" placeholder="转到第几页？"&gt;</span>
                            <span>&lt;span class="input-group-btn"&gt;</span>
                                <span>&lt;button class="btn btn-success" type="button"&gt;转到&lt;/button&gt;</span>
                            <span>&lt;/span&gt;</span>
                        <span>&lt;/div&gt;</span>
                        &lt;!--显示条数--&gt;
                        <span>&lt;div class="input-group hidden-xs"&gt;</span>
                            <span>&lt;select class="form-control" style="display:table-cell"&gt;</span>
                                <span>&lt;option&gt;10&lt;/option&gt;</span>
                                <span>&lt;option&gt;20&lt;/option&gt;</span>
                                <span>&lt;option&gt;30&lt;/option&gt;</span>
                            <span>&lt;/select&gt;</span>
                        <span>&lt;/div&gt;</span>
                    <span>&lt;/div&gt;</span>
                <span>&lt;/div&gt;</span>
            </code>
        </pre>
    </div>
    <hr />
    <h3>搜索栏</h3>
    <div class="search-bar">
        <div class="col-md-4">
            <a href="#" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>新增&nbsp;</a>
            <a href="#" class="btn btn-delete"><span class="glyphicon glyphicon-remove"></span> 批量删除</a>
        </div>
        <div class="col-md-8 text-right form-inline">
            <input type="text" class="form-control" placeholder="请输入" data-original-title="" title="">
            <input type="text" class="form-control" placeholder="请输入" data-original-title="" title="">
            <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
            <button class="btn  btn-success"><span class="glyphicon glyphicon-search"></span> 高级查询</button>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;!--创建搜索条--&gt;
                &lt;div class="search-bar"&gt;
                    &lt;!--新增删除按钮组合列--&gt;
                    <span style="background-color:#F00;">&lt;div class="col-md-4">
                        &lt;a href="#" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;新增&nbsp;&lt;/a&gt;
                        &lt;a href="#" class="btn btn-delete"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; 批量删除&lt;/a&gt;
                    &lt;/div&gt;</span>
                    &lt;!--搜索框与按钮组合列--&gt;
                    <span style="background-color:#0F0;">&lt;div class="col-md-8 text-right form-inline"&gt;
                        &lt;input type="text" class="form-control" placeholder="请输入" data-original-title="" title=""&gt;
                        &lt;input type="text" class="form-control" placeholder="请输入" data-original-title="" title=""&gt;
                        &lt;button class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;查询&lt;/button&gt;
                        &lt;button class="btn  btn-success"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt; 高级查询&lt;/button&gt;
                    &lt;/div&gt;</span>
                &lt;/div&gt;
            </code>
        </pre>
    </div>
    
</div>

</body>
</html>
